
{{template "header" .}}


<div class="ibox float-e-margins" >
    <div class="row">
        <div class="col-lg-8"></div>
        <div class="col-lg-4"></div>

    </div>

    <div class="row">

        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>同步列表
                    {{if ne .TableName "" }}
                        - TableName: {{.TableName}}
                    {{end}}
                    {{if ne .SchemaName "" }}
                        - SchemaName: {{.SchemaName}}
                    {{end}}</h5>

                    <!--dbname list-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px">
                    <select class="form-control" name="dbname" id="dbname">
                        <option value="" > 数据源 </option>
                        {{range $i, $db := .DbList}}
                            <option value="{{$db.Name}}"> {{$db.Name}} </option>
                        {{end}}
                    </select>
                    </div>
                    <script type="text/javascript">$("#dbname").val("{{.DbName}}")</script>

                    <!--通道-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px;" id="channelid_div">
                        <select class="form-control" name="channelid" id="channelid">
                            <option value="0" > 通道 </option>
                            {{range $chID,$ch := .ChannelList}}
                                <option value="{{$chID}}"> {{$ch.Name}} </option>
                            {{end}}
                        </select>
                    </div>
                    <script type="text/javascript">
                        $("#channelid").val("{{.ChannelID}}");
                        if($("#dbname").val()==""){$("#channelid_div").hide();}
                    </script>

                    <!--toserverkey list-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px">
                        <select class="form-control" name="ToServerKey" id="ToServerKey">
                            <option value="" > 目标库 </option>
                        {{range $key, $toserver := .ToServerKeyList}}
                            <option value="{{$key}}" > {{$toserver.PluginName}} -- {{$key}} </option>
                        {{end}}
                        </select>
                    </div>
                    <script type="text/javascript">$("#ToServerKey").val("{{.ToServerKey}}")</script>

                    <!--toserverkey list-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px">
                        <select class="form-control" name="ToServerKey" id="sync_status">
                            <option value="" > 状态 </option>
                            <option value="nodata" > No Data </option>
                            <option value="running" > Running </option>
                            <option value="error" > Error </option>
                        </select>
                    </div>
                    <script type="text/javascript">$("#sync_status").val("{{.SyncStatus}}")</script>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th></th>
                                <th>DbName</th>
                                <th>SchemaName</th>
                                <th>TableName</th>
                                <th>PluginName</th>
                                <th>ToServerKey</th>
                                <th>Position</th>
                                <th>Status</th>
                                <th>Error</th>
                                <th>ErrorWaitData</th>
                                <th>OP</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{range $i, $toServer := .SyncList}}
                            {{range $k, $v := $toServer.ToServerList}}
                            <tr>
                                <td>{{$i}}-{{$k}}</td>
                                <td>{{$toServer.DbName}}</td>
                                <td>{{$toServer.SchemaName}}</td>
                                <td>{{$toServer.TableName}}</td>
                                <td>{{$v.PluginName}}</td>
                                <td>{{$v.ToServerKey}}</td>
                                <td>
                                    <p title="最后一个成功处理的位点">BinlogNum: {{$v.BinlogFileNum}}</p>
                                    <p>Pisition : {{$v.BinlogPosition}}</p>
                                    <p title="队列最后一个位点">LastBinlogFileNum: {{$v.LastBinlogFileNum}}</p>
                                    <p title="队列最后一个位点">LastBinlogPosition : {{$v.LastBinlogPosition}}</p>
                                    <p title="已解析出来的数据,有多少条消息堆积在队列中待同步">QueueMsgCount: {{$v.QueueMsgCount}}</p>

                                </td>
                                <td>
                                    {{$v.Status}}
                                </td>
                                <td>{{$v.Error}}</td>
                                <td>{{$v.ErrorWaitData}}</td>
                                <td>
                                    <a href="/db/detail?dbname={{$toServer.DbName}}&schema={{$toServer.SchemaName}}&table_name={{$toServer.TableName}}">
                                    <button data-toggle="button" class="btn-sm btn-primary" type="button" >Detail</button>
                                    </a>
                                </td>
                            </tr>
                            {{end}}
                            {{end}}
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>
<script type="text/javascript">
    var TableName  = "{{.TableName}}";
    var SchemaName = "{{.SchemaName}}";
    $("#dbname,#channelid,#ToServerKey,#sync_status").change(
        function () {
            var dbname      = $("#dbname").val();
            var channelid   = $("#channelid").val();
            var ToServerKey = $("#ToServerKey").val();
            var sync_status = $("#sync_status").val();
            location.href = "/synclist?dbname="+dbname+"&schema_name="+SchemaName+"&table_name="+TableName+"&toserverkey="+ToServerKey+"&channelid="+channelid+"&sync_status="+sync_status;
        }
    );

</script>

{{template "footer" .}}